<template>
  <div class="recruit-qrcode">
    <!-- @click="goToAgentApply" -->
    <div class="qrcode">
      <img :src="staticHost + QRCodeInfo.qrcodePath" alt />
    </div>

    <div class="qrcode-info">
      <p>
        <span>说明：</span>
        <span>长按二维图片下载</span>
      </p>
      <div class="submit" ref="submit" :data-clipboard-text="QRCodeInfo.qrcodeUrl">
        <van-button type="info" size="small" @click="copyLink">复制链接</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { staticHost } from "../service/HOST.js";
import navbar from "../components/navbar.vue";
import { Button, Toast } from "vant";
import clipboard from "clipboard";

export default {
  components: {
    navbar,
    vanButton: Button
  },
  data() {
    return {
      QRCodeInfo: this.$route.query,
      staticHost,
      copyBtn: null //存储初始化复制按钮事件
    };
  },
  mounted() {
    // console.log(this.$route.query)

    this.copyBtn = new clipboard(this.$refs.submit);
  },
  methods: {
    copyLink() {
      /*这是点击按钮触发的点击事件，关于clipboard的使用就不再赘述了，上面介绍时已经讲述过，并且使用方法在官方文档上有*/
      let _this = this;
      let clipboard = _this.copyBtn;
      clipboard.on("success", function(v) {
        Toast.success("复制成功");
      });
      clipboard.on("error", function() {
        Toast("复制错误");
      });
    },
    goToAgentApply() {
      this.$router.push({
        path: "/apply_agreement",
        query: {
          codeId: this.QRCodeInfo.id,
          showBtn: true
          // levelName: this.QRCodeInfo.levelName
        }
      });
    }
  }
};
</script>

<style scoped>
.recruit-qrcode {
  padding: 40px;
  background-color: #fff;
}

.qrcode {
  width: 70%;
  height: 70%;
  min-height: 200px;
  margin: 0 auto;
  text-align: center;
}

.qrcode img {
  width: 100%;
  height: 100%;
}

.qrcode-info {
  margin: 0 auto;
  /* margin-top: 30px; */
  text-align: center;
}

.qrcode-info .submit {
  margin-top: 10px;
}

.qrcode-info span {
  word-wrap: break-word;
  word-break: break-all;
}
</style>

<style>
.qrcode-info .van-button--small {
  padding: 0px 12px;
}
</style>
